<template>
    <div class="load-warp">
        <div class="logintop">
            <div class="logintop_kk">
                <span id="span_title">欢迎登陆跑腿服务后台管理系统</span>
            </div>
        </div>
        <div class="loginbody">
            <div class="zj_bd">
                <div class="zj_leftimg"><img src="/static/img/left_zt.png"/></div>
                <div class="loginbox">
                    <div class="dl_jio">登录</div>

                    <el-form label-position="left" :model="formLogin" :rules="rules" ref="formLogin" label-width="0">
                        <ul class="login-wrap">
                            <li>
                                <el-form-item prop="username">
                                    <el-input class="login-username" trigger-on-focus="true"
                                              prefix-icon="el-icon1-erp-tubiao211" size="large"
                                              v-model="formLogin.username" placeholder="请输入用户名"></el-input>
                                </el-form-item>
                            </li>
                            <li>
                                <el-form-item prop="password">
                                    <el-input class="login-password" :type="pwdType" prefix-icon="el-icon1-erp-mima"
                                              size="large" v-model="formLogin.password" placeholder="请输入密码"></el-input>
                                </el-form-item>
                                <div class="eyes" @click="changeType()">
                                    <img src="/static/img/yanj1.png" v-if="pwdTypeScr"/>
                                    <img src="/static/img/yanj.png" v-else/>
                                </div>
                            </li>
                            <li>
                                <el-form-item prop="usertype">
                                    <el-select size="large" v-model="formLogin.usertype" style="width:100%;height:42px;"
                                               placeholder="请选择账号类型">
                                      <!--  <el-option label="商家用户" value="3"></el-option>-->
                                        <el-option label="代理商" value="2"></el-option>
                                        <el-option label="后台用户" value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                            </li>

                            <li>
                                <el-form-item>
                                    <el-button type="primary" style="width:100%;height:42px;" :loading="isloading"
                                               @click="login('formLogin')">登录{{isloading ? '中...':''}}
                                    </el-button>
                                </el-form-item>

                            </li>
                        </ul>
                    </el-form>

                </div>
            </div>
        </div>
        <div class="loginbm">
            <span id="foot_cname">Copyright © 2016</span>&nbsp;&nbsp;
            <a id="foot_cmiitbeian" style="text-decoration: underline; color: #fff;" target="_blank"> 跑腿快车 </a>&nbsp;&nbsp;
            <span id="foot_caddress">ALL Rights Reserved  版权所有</span> &nbsp;&nbsp;
        </div>
    </div>
</template>

<script>

    export default {
        data(){
            var alidateUser = (rule, value, callback) => {
                if (value === '') {
                    return callback(new Error('用户名不能用空'))
                } else {
                    callback()
                }
            }
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'))
                } else {
                    callback()
                }
            }
            var validateType = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请选择账户类型'))
                } else {
                    callback()
                }
            }
            return {
                checked: false,
                pwdType: 'password',
                pwdTypeScr: true,
                isloading: false,
                formLogin: {
                    username: '',
                    password: '',
                    usertype: ''
                },
                rules: {
                    username: [
                        {validator: alidateUser, trigger: 'blur'}
                    ],
                    password: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    usertype: [
                        {validator: validateType, trigger: 'blur'}
                    ]
                }
            }

        },
        computed: {},
        methods: {
            changeType(){
                this.pwdTypeScr = !this.pwdTypeScr
                this.pwdType = this.pwdType === 'password' ? 'text' : 'password'
            },
            loginMsgAlert(msg){
                this.$alert(msg, '登陆提示', {
                    confirmButtonText: '确定',
                    closeOnPressEscape: true,
                    callback: action => {
                    }
                })
            },
            login(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const params = {
                            'username': this.formLogin.username,
                            //'password': Md5.md5(this.formLogin.password),
                            'password': this.formLogin.password,
                            'type': this.formLogin.usertype
                        }

                        this.isloading = true
                        this.$http.post('/server/home/login', JSON.stringify(params))
                            .then(res => {
                                this.isloading = false

                                const datas = res.data
                                if (datas.success) {
                                    sessionStorage.setItem('token', datas.data.token)
                                    sessionStorage.setItem('expire', datas.data.expire)
                                    sessionStorage.setItem('usermsg', JSON.stringify({
                                        user: this.formLogin.username,
                                        type: this.formLogin.usertype
                                    }))
                                    if (this.$route.query.redirect) {
                                        this.$router.replace({path: this.$route.query.redirect})
                                    } else {
                                        this.$router.replace({path: '/main/index/index'})
                                    }
                                } else {
                                    this.loginMsgAlert(datas.errorMsg)

                                }
                            })
                            .catch(err => {   //需要申明
                                this.isloading = false
                                //可以不用申明，但控制器会报错 并暴漏错误信息
                            })

                    } else {
                        return false
                    }
                })

            }
        },
        created(){                      //自动登陆
            if (sessionStorage.getItem('token')) {
                if (this.$route.query.redirect) {
                    this.$router.replace({path: this.$route.query.redirect})
                } else {
                    this.$router.replace({path: '/main/orderlist/0'})
                }
            }


        }
    }

</script>
<style scoped>
    .load-warp {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        min-width: 1200px;
        background: url(/static/img/gl_bj.png) no-repeat center top;
        overflow: hidden;
    }

    .logintop {
        height: 47px;
        position: absolute;
        top: 0;
        background: url(/static/img/loginbg1.png) repeat-x;
        z-index: 100;
        width: 100%;
    }

    .logintop_kk {
        width: 1200px;
        margin: 0px auto;
    }

    .zj_bd {
        width: 1200px;
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -200px;
        overflow: hidden;
    }

    .zj_leftimg {
        width: 661px;
        height: 207px;
        float: left;
    }

    .zj_leftimg img {
        margin-top: 100px;
        margin-left: 30px;
    }

    .logintop span {
        color: #fff;
        line-height: 47px;
        background: url(/static/img/loginsj.png) no-repeat 0px 15px;
        text-indent: 25px;
        color: #ffffff;
        float: left;
    }

    .loginbody {
        position: absolute;
        top: 47px;
        bottom: 47px;
        left: 50%;
        margin-left: -600px;
        width: 1200px;
    }

    .systemlogo {
        width: 100%;
        height: 71px;
        margin-top: 75px;
    }

    .loginbox {
        width: 380px;
        height: 400px;
        float: right;
        background: #fff;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    .loginbox li {
        position: relative;
    }

    .loginbox li .eyes {
        position: absolute;
        right: 0px;
        top: 0;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }

    .loginbox li .eyes img {
        vertical-align: middle;
    }

    .loginbox .dl_jio {
        width: 66px;
        margin: 30px auto;
        font-size: 20px;
        border-bottom: 3px solid #7f7e82;
        text-align: center;
        padding-bottom: 10px;
    }

    .loginbox .login-wrap {
        width: 300px;
        margin: 0 auto;
    }

    .loginuser {
        width: 280px;
        height: 14px;
        border: none;
        font-size: 14px;
    }

    .loginbm {
        height: 47px;
        line-height: 47px;
        text-align: center;
        background: url(/static/img/loginbg1.png) repeat-x;
        position: fixed;
        bottom: 0;
        width: 100%;
        color: #fff;
    }

</style>
